import { PageContainer } from '@ant-design/pro-layout';
import { Col, Row, Space } from 'antd';
import React, { useEffect, useState } from 'react';
import styles from './index.less';
import { XoProTable } from '@/components/XoProTable';
import type { ProColumns } from '@ant-design/pro-table';
import type { Situation } from '@/models/situation';
import { gokuGameList } from '@/services/situation';
import { gokuGameDataInfo, infoByActivityIdAndUid} from '@/services/student';
import { history } from 'umi';

export default function PlayChess() {
  // 用户id
  const { id, courseId } = history.location.query || {};

  const [dataInfo, setDataInfo] = useState<any>();
  const [userInfo,setUserInfo]=useState<any>();
  useEffect(() => {
    (async () => {
      const res = await gokuGameDataInfo({
        uid: Number(id)!,
        activityId: courseId,
      });
      setDataInfo(res.result);
    })();
    (async () => {
      const res = await infoByActivityIdAndUid({
        uid: Number(id)!,
        activityId: courseId,
      });
      setUserInfo(res.result);
    })();
  }, []);
  const columns: ProColumns<Situation>[] = [
    {
      dataIndex: 'id',
      title: '棋谱ID',
      width:80
    },
    {
      dataIndex: 'aiLevel',
      title: 'AI等级',
      search: false,
      width:80
    },
    {
      dataIndex: 'holdType',
      title: '执子',
      search: false,
      width:80,
      valueEnum: {
        1: { text: '执黑' },
        2: { text: '执白' },
      },
    },
    {
      dataIndex: 'startTime',
      title: '开始时间',
      search: false,
      width:180
    },
    {
      dataIndex: 'endTime',
      title: '结束时间',
      search: false,
      width:180
    },
    {
      dataIndex: 'gameTime',
      title: '对弈用时',
      search: false,
      width:80
    },
    {
      dataIndex: 'steps',
      title: '手数',
      search: false,
      width:80
    },
    {
      dataIndex: 'gameResult',
      title: '对弈结果',
      width:80,
      hideInTable:true,
      // search:false,
      valueEnum: {
        0: { text: '全部' },
        1: { text: '胜利' },
        2: { text: '失败' },
        // 3: { text: '平局' },
      },
    },
    {
      dataIndex: 'gnuResult',
      title: '对弈结果',
      width:80,
      search:false,
      // valueEnum: {
      //   0: { text: '全部' },
      //   1: { text: '胜利' },
      //   2: { text: '失败' },
      //   3: { text: '平局' },
      // },
    },
    {
      dataIndex: 'previousPower',
      title: '当前战力',
      search: false,
      width:80,
    },
    {
      dataIndex: 'changePower',
      title: '获得战力',
      search: false,
      width:80,
    },
    {
      dataIndex: 'analysisStatus',
      title: '点评状态',
      width:80,
      valueEnum: {
        UNAPPLY: { text: '未申请' },
        UNDO: { text: '未点评' },
        DOING: { text: '点评中' },
        DONE: { text: '已点评' },
        ERROR: { text: '失败' },
      },
    },
    {
      dataIndex: 'reviewStatus',
      title: '复盘状态',
      width:80,
      valueEnum: {
        // UNAPPLY: { text: '未申请' },
        UNDO: { text: '待复盘' },
        DOING: { text: '复盘中' },
        DONE: { text: '已复盘' },
      },
    },
    {
      dataIndex: 'option',
      title: '操作',
      width:100,
      search: false,
      fixed: 'right',
      render: (_, records) => {
        if(records.analysisStatus!=='DONE'){
          return(
            <a target="_blank" href={`/web/gospirit_webview/game_history_t?gameId=${records.id}&isTeacher=1`} rel="noreferrer">查看棋谱</a>
          )
        }
        if(records.analysisStatus=='DONE'){
          return(
            <a target="_blank" href={`/web/gospirit_webview/game_history_t?gameId=${records.id}&isTeacher=1`} rel="noreferrer">查看点评</a>
          )
        }
        if(records.reviewStatus=='DONE'){
          return(
            <a target="_blank" href={`/web/gospirit_webview/game_review_s?reviewId=${records.id}&isTeacher=1`} rel="noreferrer">查看复盘</a>
          )
        }
      },
    },
  ];

  return (
    <PageContainer
      className={styles.info_container}
      header={{
        title: '',
        breadcrumb: {},
      }}
      content={
        <Row className={styles.row}>
          <Col span={8} className={styles.row_item}>
            <Col>
              <Space>
                <span>用户ID:</span>
                <span>{id ?? '-'} </span>
              </Space>
            </Col>
            <Col>
              <Space>
                <span>手机号:</span>
                <span>{userInfo?.phone ? userInfo.phone : '-'} </span>
              </Space>
            </Col>
          </Col>
          <Col span={8} className={styles.row_item}>
            <Col>
              <Space>
                <span>用户昵称:</span>
                <span>{userInfo?.nickname ? userInfo.nickname : '-'}</span>
              </Space>
            </Col>
            <Col>
              <Space>
                <span>悟空战力/分数:</span>
                <span>
                  {dataInfo?.curPower || dataInfo?.curScore
                    ? `${dataInfo.curPower ?? '-'}/${dataInfo.curScore ?? '-'}`
                    : '-'}
                </span>
              </Space>
            </Col>
          </Col>
          <Col span={8} className={styles.row_item}>
            <Col>
              <Space>
                <span>真实姓名:</span>
                <span>{userInfo?.realName ? userInfo.realName : '-'}</span>
              </Space>
            </Col>
            <Col>
              <Space>
                <span>胜/总（胜率）:</span>
                <span>
                  {dataInfo?.allCount&&dataInfo.allWinCount
                    ? `${dataInfo?.allWinCount}/${dataInfo?.allCount}
                    (${(
                      (dataInfo?.allWinCount / dataInfo?.allCount) *
                      100
                    ).toFixed(2)}%)`
                    : '-'}
                </span>
              </Space>
            </Col>
          </Col>
        </Row>
      }
    >
      <XoProTable
        request={async (params) => {
          const body = (await gokuGameList({ ...params, uid: Number(id) }))?.result;
        console.log(body);
        
          return {
            data: body?.records,
            total: body?.total,
          };
        }}
        options={false}
        rowKey="key"
        scroll={{ x: 1500 }}
        hasIndex={false}
        columns={columns}
      />
    </PageContainer>
  );
}
